<template>
  <div class="complaintDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">投诉建议详情</x-header>
    <div class="topHolder"></div>
    <checklist title="投诉建议类型：" :max="1" required :options="typeList" v-model="choosenList"></checklist>
    <group title="备注(选填)：">
      <x-textarea :max="200" v-model="remark" placeholder="点击输入"></x-textarea>
    </group>
    <box gap="1rem 0.8rem">
      <x-button :gradients="['#FF2719', '#FF61AD']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="提交"></x-button>
    </box>
  </div>
</template>

<script>
  import { Group, Checklist, XTextarea, Box, XButton } from 'vux'
  import {getLowerType,submitCallService} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'complaintDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramTableId:this.$route.params.tableId,
        remark:'',
        typeList:[],
        choosenList:[]
      }
    },
    components:{
      Group,
      Checklist,
      XTextarea,
      Box,
      XButton
    },
    computed:{

    },
    methods:{
      submit(){
        if(this.choosenList.length <= 0){
          message({message:'请先选择投诉类型！',type:'error'})
        }else{
          let reqParams = {
            remark:this.remark,
            type:this.choosenList[0],
            tableId:this.paramTableId
          }
          submitCallService(reqParams).then((res)=>{
            if(res.status == 'success'){
              message({message:'提交投诉建议成功',type:'info'})
              this.$router.push({name:'扫码操作',params:{tableId:this.paramTableId}})
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('submitCallService error info:', res.msg)
            }
            this.loadingStatus = false
          }).catch((err)=>{console.log('submitCallService catch info:',err)})
        }
      }
    },
    mounted(){
      getLowerType(3).then((res)=>{
        if(res.status == 'success'){
          this.typeList = res.data
          this.loadingStatus = false
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getLowerType error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getLowerType catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .complaintDetail{
  }
</style>
